<template>
  <a-layout>
    <a-layout-header class="bg-white admin-content-header">
      <div class="col-4 admin-tiao-left">
        <span>题库详情</span>
      </div>
      <div class="col-8 text-right">
        <el-button-group>
          <el-button type="primary" @click="handleEdit(false)">添加题目</el-button>
        </el-button-group>
      </div>
      <el-drawer
        :title="!form.ID?'添加题目':'修改题目'"
        :visible.sync="dialog"
        direction="rtl"
        :wrapperClosable="true"
      >
        <el-main class="demo-drawer__content">
          <subject v-bind="{formData:form, setData}"></subject>
        </el-main>
        <el-footer class="demo-drawer__footer">
          <el-button @click="dialog = false;">取 消</el-button>
          <el-button v-text="!form.ID?'确认':'修改'" type="primary" @click="handleClose"></el-button>
        </el-footer>
      </el-drawer>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-table height="100%" class="text-center" :data="data" style="width: 100%;">
        <el-table-column label="序号" prop="ID"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="类型" prop="type"></el-table-column>
        <el-table-column label="知识点" prop="knowledgepoints"></el-table-column>
        <el-table-column fixed="right" label="操作" width="280" show-overflow-tooltip>
          <template slot="header">
            <input class="el-input__inner" v-model.lazy="search" placeholder="请输入内容" />
          </template>
          <template slot-scope="scope">
            <el-button type="primary" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import subject from "./subject/index.vue";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";

import {
  asyncgetitembank,
  asyncdelitembank,
  asynccreateitembank
} from "../../../plugins/api";
export default {
  name: "detail",
  props: ["ID"],
  data() {
    return {
      detailData: [],
      search: "",
      dialog: false,
      formLabelWidth: "80px",
      form: {},
      currentPage: 1,
      pagesize: 20
    };
  },
  computed: {
    data() {
      const { detailData, search } = this;
      return detailData.filter(data => {
        const arr = JSON.stringify(Object.values(data));
        return !search || arr.toLowerCase().includes(search.toLowerCase());
      });
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    //多选答案
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.arr1.length;
      this.data.answer.ans2 = this.newarr1;
    },
    //编辑
    handleEdit(row) {
      let f;
      if (row) {
        f = JSON.parse(JSON.stringify(row));
        const d = f.data;
        if (!d.单选) d.单选 = [];
        if (!d.多选) d.多选 = [];
        if (!d.填空) d.填空 = [];
        if (!d.解答) d.解答 = "";
      } else {
        f = {
          ID: "",
          name: "",
          type: "",
          delivery: false,
          resource: "",
          analysis: "",
          knowledgepoints: "",
          itembankgroupid: this.ID,
          data: {
            单选: [],
            多选: [],
            填空: [],
            解答: "",
            answer: []
          }
        };
      }
      this.dialog = true;
      this.form = f;
    },
    //删除
    handleDelete(index, row) {
      asyncdelitembank({ ID: row.ID })
        .then(() => {
          this.start();
          this.$message({
            message: "删除成功",
            type: "success"
          });
        })
        .catch(err => {
          console.log(err);
          this.$message({
            message: "删除失败"
          });
        });
    },
    handleClose() {
      asynccreateitembank(this.form)
        .then(() => {
          let t = "添加成功";
          if (this.form.ID) t = "修改成功";
          this.start();
          this.$message({
            message: t,
            type: "success"
          });
          this.dialog = false;
        })
        .catch(err => {
          console.log(err);
        });
    },
    //点击取消
    change(val) {
      console.log(val);
    },
    setData(data) {
      this.form = data;
    },
    start() {
      asyncgetitembank()
        .then(data => {
          this.detailData = data.filter(
            item => item.itembankgroupid == this.ID
          );
        })
        .catch(err => {
          console.log(err);
        });
    }
  },
  watch: {
    $route() {
      this.start();
    }
  },
  components: {
    subject,
    adminContentFooter
  },
  created() {
    this.start();
  }
};
</script>
